<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5" type="home">
{
  layout: 'tabbar',
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '首页',
  },
}
</route>
<template>
  <view>
    <wd-swiper
      :list="swiperList"
      autoplay
      v-model:current="current"
      :indicator="{ type: 'dots-bar' }"
      @click="handleClick"
      @change="onChange"
    ></wd-swiper>

    <view
      class="bg-white overflow-hidden pt-2 px-4"
      :style="{ marginTop: safeAreaInsets?.top + 'px' }"
    ></view>
    <wd-fab :z-index="600" position="right-bottom" :expandable="false" :draggable="true">
      <template #trigger>
        <wd-button @click="handleBtnClick" icon="share" type="error">分享给朋友</wd-button>
      </template>
    </wd-fab>
    <wd-fab
      :z-index="600"
      :draggable="true"
      :gap="{ top: 16, left: 16, right: 16, bottom: safeAreaInsets?.bottom + 48 }"
    ></wd-fab>
  </view>
</template>

<script lang="ts" setup>
import { TestEnum } from '@/typings'
import PLATFORM from '@/utils/platform'

defineOptions({
  name: 'Home',
})

// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getWindowInfo()

// 测试 uni API 自动引入
onLoad(() => {
  console.log(TestEnum.A)
})

const current = ref<number>(0)

const swiperList = ref([
  'https://registry.npmmirror.com/wot-design-uni-assets/*/files/redpanda.jpg',
  'https://registry.npmmirror.com/wot-design-uni-assets/*/files/capybara.jpg',
  'https://registry.npmmirror.com/wot-design-uni-assets/*/files/panda.jpg',
  'https://registry.npmmirror.com/wot-design-uni-assets/*/files/moon.jpg',
  'https://registry.npmmirror.com/wot-design-uni-assets/*/files/meng.jpg',
])
function handleClick(e) {
  console.log(e)
}
function onChange(e) {
  console.log(e)
}

const handleBtnClick = () => {
  console.log('点击了')
}
</script>

<style>
.main-title-color {
  color: #d14328;
}
</style>
